
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ page isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <title>薪酬管理系统--员工</title>
    <link rel="stylesheet" type="text/css"
          href="resources/css/styleSheet.css">
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
          integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
          crossorigin="anonymous">
    <link
            href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
            rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script
            src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.0.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.0.0/dist/css/bootstrap-theme.min.css" rel="stylesheet">

</head>
<body style="padding-top: 10%;background-size: cover;">
<c:set var="employee" scope="session" value="${sessionScope.employee}"/>

<jsp:include page="showLogin.jsp"/>
<!-- 判断是否登录 -->
<c:if test="${not empty employee}">

    <!--页面中心内容-->
    <div class="row">
        <div class="col-sm-2">
            <!--菜单组件：手风琴 panel-group容器-->
            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                <!--面板-->
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingOne">
                        <h4 class="panel-title">
                            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"
                               aria-expanded="true" aria-controls="collapseOne">
                                <span class="glyphicon glyphicon-home" aria-hidden="true"></span> 员工信息
                            </a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel"
                         aria-labelledby="headingOne">
                        <div class="panel-body">
                            <!--嵌套列表组-->
                            <ul class="list-group">

                                <li class="list-group-item"><a
                                        href="${pageContext.request.contextPath}/employee/employeeInfo"><span
                                        class="glyphicon glyphicon-user" aria-hidden="true"></span> &nbsp;查看员工信息</a>
                                </li>
                                <li class="list-group-item"><a
                                        href="${pageContext.request.contextPath}/employee/salary"><span
                                        class="glyphicon glyphicon-yen" aria-hidden="true"></span> &nbsp;查看薪资信息</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--中心内容-->
        <div class="col-sm-10">
            <!--标签页-->
            <div>
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab"
                                                              data-toggle="tab">查看员工信息</a></li>
                    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab"><a
                            href="${pageContext.request.contextPath}/employee/salary">查看薪资信息</a></a></li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="home">
                        <!--栅格布局-->
                        <!--头像部分，可修改-->
                        <div class="row" style="margin-top: 70px">
                            <div class="col-sm-10 col-sm-offset-1">
                                <h1>个人信息</h1>
                                <div style="height: 50px">
                                </div>
                                <img src="${employeeInfo.photo}" class="col-sm-5" alt="text"
                                     style="width: 400px;height: 400px;">
                                <div class="col-sm-7">
                                </div>
                                <div class="col-sm-3">
                                    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal"
                                            data-target="#photo">
                                        更改照片
                                    </button>
                                </div>
                                <!-- Modal -->
                                <form action="${pageContext.request.contextPath}/employee/updatePhoto" method="post"
                                      enctype="multipart/form-data">
                                    <div class="modal fade" id="photo" tabindex="-1" role="dialog"
                                         aria-labelledby="myModalLabel">
                                        <div class="modal-dialog" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <button type="button" class="close" data-dismiss="modal"
                                                            aria-label="Close"><span aria-hidden="true">&times;</span>
                                                    </button>
                                                    <h4 class="modal-title" id="myModalLabel">
                                                        请选择照片，支持格式为.png,.jpeg,.jpg</h4>
                                                </div>
                                                <div class="modal-body">
                                                    <label for="photo">选择照片</label>
                                                    <input type="file" name="employeePhoto">
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-default" data-dismiss="modal">
                                                        Close
                                                    </button>
                                                    <button type="submit" class="btn btn-primary">确认上传</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                                <!--用户信息展示表格-->
                                <table class="table table-bordered table-hover table-striped">
                                    <tr>
                                        <th>基本信息项</th>
                                        <th>信息</th>
                                    </tr>
                                    <tr>
                                        <td> 用户名</td>
                                        <td><c:out value="${employeeInfo.username}"/>
                                        </td>

                                    </tr>
                                    <tr>
                                        <td>身份</td>
                                        <td>员工</td>

                                    </tr>
                                    <tr>
                                        <td>姓名</td>
                                        <td>
                                            <c:out value="${employeeInfo.fullname}"/></td>
                                    </tr>
                                    <tr>
                                        <td> 邮箱</td>
                                        <td><c:out value="${employeeInfo.email}"/>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td> 电话号码</td>
                                        <td><c:out value="${employeeInfo.phoneNumber }"/>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td> 出生日期</td>
                                        <td><c:out value="${employeeInfo.birthday }"/>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td> 部门</td>
                                        <td><c:out value="${employeeInfo.departmentName }"/>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td> 级别</td>
                                        <td><c:out value="${employeeInfo.levelName }"/>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td> 银行卡号</td>
                                        <td><c:out value="${employeeInfo.bankAccount }"/>
                                        </td>
                                    </tr>
                                </table>

                                <!-- Button trigger modal -->

                                <button type="button" class="btn btn-primary btn-lg" data-toggle="modal"
                                        data-target="#myModal">
                                    修改基本信息
                                </button>
                                <c:if test="${not empty message}">
                                    <c:if test="${message.status==1}">
                                        <div class="alert alert-success alert-dismissible" role="alert">
                                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                <span aria-hidden="true">&times;</span></button>
                                            <strong>Success!</strong>
                                            <p><c:out value="${message.message}"/>
                                            </p>
                                        </div>
                                    </c:if>
                                    <c:if test="${message.status==0}">
                                        <div class="alert alert-danger alert-dismissible" role="alert">
                                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                <span aria-hidden="true">&times;</span></button>
                                            <strong>Warning!</strong>
                                            <p><c:out value="${message.message}"/>
                                            </p>
                                        </div>
                                    </c:if>
                                </c:if>
                                <form name="changeForm" method="post"
                                      action="${pageContext.request.contextPath}/employee/updateInfo">
                                    <!-- Modal -->
                                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
                                         aria-labelledby="myModalLabel">
                                        <div class="modal-dialog" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <button type="button" class="close" data-dismiss="modal"
                                                            aria-label="Close"><span aria-hidden="true">&times;</span>
                                                    </button>
                                                    <h4 class="modal-title">基本信息</h4>
                                                </div>
                                                <div class="modal-body">
                                                    <form>
                                                        <div class="form-group">
                                                            <label for="username">用户名</label>
                                                            <input type="text" class="form-control" id="username"
                                                                   name="username" placeholder="${employee.username}"
                                                                   value="${employee.username}" disabled>

                                                        </div>
                                                        <div class="form-group">
                                                            <label for="exampleInputPassword1">密码</label>
                                                            <input type="password" class="form-control"
                                                                   id="exampleInputPassword1" name="password"
                                                                   placeholder="密码" required>
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="name">姓名</label>
                                                            <input type="text" class="form-control" id="name"
                                                                   name="fullname" placeholder="${employee.fullname}"
                                                                   value="${employee.fullname}">

                                                        </div>
                                                        <div class="form-group">
                                                            <label for="exampleInputEmail1">邮箱</label>
                                                            <input type="email" class="form-control"
                                                                   id="exampleInputEmail1" name="email"
                                                                   placeholder="${employee.email}"
                                                                   value="${employee.email}">
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="birthday">出生日期</label>
                                                            <input type="date" class="form-control" id="birthday"
                                                                   name="birthday" placeholder="${employee.birthday}"
                                                                   value="${employee.birthday}">
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="phoneNo">电话号码</label>
                                                            <input type="tel" class="form-control" id="phoneNo"
                                                                   name="phoneNumber"
                                                                   placeholder="${employee.phoneNumber}"
                                                                   value="${employee.phoneNumber}">
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="bankcard">银行卡号</label>
                                                            <input type="text" class="form-control" id="bankcard"
                                                                   name="bankAccount"
                                                                   placeholder="${employee.bankAccount}"
                                                                   value="${employee.bankAccount}">
                                                        </div>
                                                    </form>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-default" data-dismiss="modal">
                                                        Close
                                                    </button>
                                                    <button type="submit" class="btn btn-primary">Save changes</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="profile">
                        <!--栅格布局-->
                        <!--用户表格,显示薪资信息-->
                        <div class="row" style="margin-top: 70px">
                            <div class="col-sm-10 col-sm-offset-1">
                                <div class="col-sm-7">
                                    <form action="${pageContext.request.contextPath}/employee/findSalaryByYearAndMonth"
                                          method="get" class="form-inline my-2 my-lg-0">
                                        <h4>搜索日期：</h4><br><br>
                                        <input class="form-control mr-sm-2 col-md-2" type="search" name="year"
                                               placeholder="年份" aria-label="Search"> 年 &nbsp;&nbsp;&nbsp;
                                        <select class="selectpicker show-tick form-control" name="month"
                                                data-live-search="true">
                                            <option>1</option>
                                            <option>2</option>
                                            <option>3</option>
                                            <option>4</option>
                                            <option>5</option>
                                            <option>6</option>
                                            <option>7</option>
                                            <option>8</option>
                                            <option>9</option>
                                            <option>10</option>
                                            <option>11</option>
                                            <option>12</option>
                                        </select> &nbsp;月
                                        &nbsp;&nbsp;&nbsp;
                                        <button class="btn btn btn-primary btn-group-sm my-2 my-sm-0" type="submit">搜索
                                        </button>
                                    </form>
                                </div>
                                <div class="col-sm-3">
                                    <form action="${pageContext.request.contextPath}/employee/salary" method="get"
                                          class="form-inline my-2 my-lg-0">
                                        <button class="btn btn btn-primary btn-group-sm my-2 my-sm-0" type="submit">
                                            显示全部工资信息
                                        </button>
                                    </form>
                                </div>

                                <div style="height: 60px">

                                </div>
                                <table class="table table-bordered table-hover table-striped">
                                    <tr>
                                        <th>序号</th>
                                        <th>发放时间</th>
                                        <th>岗位工资</th>
                                        <th>绩效工资</th>
                                        <th>工龄工资</th>
                                        <th>津贴补助</th>
                                        <th>个人所得税</th>
                                        <th>总工资</th>
                                        <th>税后总工资</th>
                                    </tr>
                                    <c:forEach items="${salaryList.items}" var="salaryItem"
                                               varStatus="ItemLoopCount">
                                        <tr>
                                            <td>${ItemLoopCount.count}</td>
                                            <td>${salaryItem.paymentDate}</td>
                                            <td>${salaryItem.positionSalary}</td>
                                            <td>${salaryItem.performanceSalary}</td>
                                            <td>${salaryItem.senioritySalary}</td>
                                            <td>${salaryItem.allowance}</td>
                                            <td>${salaryItem.taxation}</td>
                                            <td>${salaryItem.totalSalaryAmount}</td>
                                            <td>${salaryItem.actualPayAmount}</td>
                                        </tr>
                                    </c:forEach>
                                </table>
                                <!--分页-->
                                <div>
                                    每页${salaryList.pageSize}条工资信息，
                                    第${salaryList.currentPageNo}/${salaryList.totalPageCount}页,共${salaryList.totalCount}条工资信息
                                    <c:if test="${salaryList.previousPage}">
                                        <a href="<c:url value="/employee/salary?pageNo=${salaryList.currentPageNo-1}" />">上一页</a>
                                    </c:if>
                                    <c:if test="${salaryList.nextPage}">
                                        <a href="<c:url value="/employee/salary?pageNo=${salaryList.currentPageNo+1}" />">下一页</a>
                                    </c:if>
                                </div>

                                    <%--                            <ul>--%>

                                    <%--                                <c:if test="${salaryList.currentPage == 1}">--%>
                                    <%--                                <a href ="javascript:return false;">--%>
                                    <%--                                    </c:if>--%>
                                    <%--                                    <c:if test="${salaryList.currentPage != 1}">--%>
                                    <%--                                    <a href="<c:url value="/employee/salary?pageNo=${salaryList.currentPageNo-1}" />" >--%>
                                    <%--                                        </c:if>--%>
                                    <%--                                        <li class="page-li">上一页</li></a>--%>
                                    <%--                                </a>--%>
                                    <%--                                <c:forEach begin="1" end="${salaryList.totalCount}" var="i">--%>
                                    <%--                                    <c:if test="${salaryList.currentPage == i}">--%>
                                    <%--                                        <a href="${pageContext.request.contextPath}/employee/salary?pageNo=${i}><li style="background-color: #009688;border-radius: 2px;color: white;">${i}</li></a>--%>
                                    <%--                                    </c:if>--%>
                                    <%--                                    <c:if test="${salaryList.currentPage != i}">--%>
                                    <%--                                        <a href="${pageContext.request.contextPath}/employee/salary?pageNo=${i}><li>${i}</li></a>--%>
                                    <%--                                    </c:if>--%>
                                    <%--                                </c:forEach>--%>

                                    <%--                                <c:if test="${salaryList.currentPage == salary.totalCount}">--%>
                                    <%--                                <a href="javascript:return false;">--%>
                                    <%--                                    </c:if>--%>
                                    <%--                                    <c:if test="${salary.currentPage != salary.totalCount}">--%>
                                    <%--                                    <a href="<c:url value="/employee/salary?pageNo=${salaryList.currentPageNo+1}" />" >--%>
                                    <%--                                        </c:if>--%>
                                    <%--                                        <li class="page-li">下一页</li></a>--%>
                                    <%--                            </ul>--%>

                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</c:if>

<div style="height: 300px">

</div>

<!--统一的尾部：版权信息-->
<jsp:include page="information.jsp"/>

<!-- jQuery and JavaScript Bundle with Popper -->
<script
        src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
        crossorigin="anonymous"></script>
<script
        src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
        crossorigin="anonymous"></script>
<script
        src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js"
        crossorigin="anonymous"></script>
<script type="text/javascript" src="script.js"></script>

</body>
</html>

